<template>
  <div class="jmbq-box">
    <div><span class="Res-List"></span> 居民标签统计</div>
    <div class="Res-Date">
      <span>选择签约日期</span>
      <!-- 日期选择器 -->
      <DatePicker></DatePicker>
    </div>
    <div>
      <!-- 机构 -->
      <ResidentOption></ResidentOption>
    </div>
    <div class="chart-box">
      <div ref="barChart" :style="{ width: '1000px', height: '400px' }"></div>
    </div>
    <div>
      <div class="Res-btn">
        <el-button @click="ResDerive">导出</el-button>
      </div>
    </div>
    <div>
      <el-table show-summary="true" :data="datagender" stripe style="width: 100%;font-size: 12px;">
        <el-table-column prop="no" label="序号" align="center" />
        <el-table-column prop="name" label="标签" align="center" />
        <el-table-column prop="count" label="人次" align="center" />
        <el-table-column prop="ratio" label="占总人数比" align="center" />
      </el-table>
    </div>

  </div>
</template>

<script lang='ts' setup>
import * as echarts from 'echarts';
import { reactive, ref } from 'vue'
import DatePicker from "@/components/mmm/DatePicker.vue"
import ResidentOption from "@/components/mmm/ResidentOption.vue"
import api from "@/api"
import * as XLSX from "xlsx";
import { ElMessage } from 'element-plus'

let Allnum = ref<number>(0)
let PeopleLabel = ref([])
let lableName = ref([])
let lableCount = ref([])
let AllNumArray = ref([])

//表格显示数据
let datagender = ref<Array<any>>([])
//获取居民标签数据
const getPeopleLabel = async () => {
  const result = await api.Mdatastatistics.getPeopleLabelApi()
  console.log("标签", result.data.data);
  PeopleLabel.value = result.data.data

  PeopleLabel.value.forEach((element: any) => {
    // console.log(element.name);
    lableName.value.push(element.name);
    lableCount.value.push(element.count);
  });
  console.log(lableName.value);


}
getPeopleLabel()
//获取居民总数量
const postAllBasicResidentBySearch = async () => {
  const result = await api.Mdatastatistics.postAllBasicResidentBySearchApi()
  console.log("总数", result.data.data.length);
  Allnum.value = result.data.data.length
  // console.log(lableName.value.length);
  for (let i = 0; i < lableName.value.length; i++) {
    AllNumArray.value.push(Allnum.value)
  }
  AllNumArray.value = Object.values(AllNumArray.value)
  initBarEcharts()

  for (let i = 0; i < lableName.value.length; i++) {
    datagender.value.push(
      { no: i + 1, name: lableName.value[i], count: lableCount.value[i], ratio: lableCount.value[i] / Allnum.value * 100 + "%" },)
  }
  // console.log(".....", datagender.value);


}
postAllBasicResidentBySearch()

const barChart = ref<HTMLElement>();
const myChart1 = ref<any>();
// 绘制柱形图
function initBarEcharts() {
  myChart1.value = echarts.init(barChart.value!);
  myChart1.value.setOption({
    title: {
      text: '居民标签数量统计',
      x: 'left',
      itemGap: '200%',
    },
    grid: {
      top: 90
    },
    tooltip: {
      trigger: 'item',
    },
    legend: {
      top: '10%',
      left: 'left',
      icon: 'circle'
    },
    xAxis: {
      type: 'category',
      data: lableName.value
    },
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "标签人数",
        data: lableCount.value,
        type: 'bar',
        barWidth: 15,
        itemStyle: {
          color: "#409EFF"
        },
      },
      {
        name: "总人数",
        data: AllNumArray.value,
        type: 'bar',
        barWidth: 15,
        barGap: '-100%',
        itemStyle: {
          color: 'rgba(102,142,220,0.2)'
        },
      }
    ],

  });
}

//表格导出
const ResDerive = () => {
  const data = XLSX.utils.json_to_sheet(datagender.value)//此处res.result为表格的数据
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为定义的表格中表头名
  XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名

  ElMessage({
    message: "导出成功",
    type: 'success'
  })


}
</script>

<style lang='scss' scoped>
.jmbq-box {
  @include BoxStyle;

  .Res-List {
    @include dataList;
  }

  .Res-Date {
    font-size: 12px;
    display: flex;
    color: #999;
    margin-top: 20px;

    span {
      margin-top: 3px;
    }

  }

  .chart-box {
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 20px 20px 10px 20px;
    margin: 20px;
  }

  .Res-btn {
    text-align: right;
    margin: 20px;
  }
}
</style>